<template>
  <el-dialog
    close="dialog"
    title="人员详情"
    :visible.sync="dialogVisible"
    width="40%"
  >
    <div class="userInfo">
      <span>人员名称：{{ userList.userName }}</span>
      <span>角色：{{ userList.roleName }}</span>
      <span>联系电话：{{ userList.mobile }}</span>
      <span>负责区域：{{ userList.regionName }}</span>
    </div>
    <table>
      <thead>
        <tr>
          <td></td>
          <td>总工单数</td>
          <td>拒绝工单</td>
          <td>完成工单</td>
          <td>进行中工单</td>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>本周</td>
          <td>{{ weekList.total }}</td>
          <td>{{ weekList.cancelCount }}</td>
          <td>{{ weekList.workCount }}</td>
          <td>{{ weekList.progressTotal }}</td>
        </tr>
        <tr>
          <td>本月</td>
          <td>{{ mounthList.total }}</td>
          <td>{{ mounthList.cancelCount }}</td>
          <td>{{ mounthList.workCount }}</td>
          <td>{{ mounthList.progressTotal }}</td>
        </tr>
        <tr>
          <td>本年</td>
          <td>{{ yearList.total }}</td>
          <td>{{ yearList.cancelCount }}</td>
          <td>{{ yearList.workCount }}</td>
          <td>{{ yearList.progressTotal }}</td>
        </tr>
      </tbody>
    </table>
  </el-dialog>
</template>

<script>
export default {
  name: 'workListAdd',
  props: ['weekList', 'mounthList', 'yearList', 'userList'],
  data () {
    return {
      dialogVisible: false
    }
  },
  methods: {
    dialogH () {
      this.dialogVisible = true
    },
    dialogV () {
      this.dialogVisible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.userInfo {
  font-size: 14px;
  word-break: break-all;
  color: #666;
  position: relative;
  box-sizing: border-box;
  height: 86px;
  padding: 19px 19px 0;
  background: #f3f6fb;
  margin-bottom: 20px;
  span {
    display: inline-block;
    width: 160px;
    margin-bottom: 20px;
  }
}
table {
  width: 560px;
  text-align: center;
  border: 1px solid #d8dde3;
  border-collapse: collapse;
  thead {
    tr {
      background-color: #f3f6fb;
    }
  }

  td {
    border: 1px solid #d8dde3;
    width: 115px;
    height: 40px;
  }
}
</style>
